<template>
   <div class="container header">
    <My-header title="推广">
      <!-- <span class="right" @click="refresh()">刷新</span> -->
    </My-header>
    <div class="content login">
      <div class="tgbg"   >
         <h3>{{userInfo.name}}</h3> 
        <!-- <input id="text" type="text" value="http://www.runoob.com" style="width:80%" /><br /> -->
        <div  class="ewm" id="qrcode" ></div>
        <div class="tj">
          <span class="tjbtn">我的推广二维码</span>
        </div>
      </div>
    
    </div>
    <Tabnav name="nav" />
  </div>
</template>
<script>
import Tabnav from "@/components/Tabnav.vue";
import MyHeader from "@/components/MyHeader.vue";
import { mapState } from "vuex";
import axios from "axios";
import $ from "jquery";


export default {
  name: "generalize",
  components: {
    MyHeader,
    Tabnav
  },
  data(){
    return{
      ewm:''
    }
  },
  computed: {
    ...mapState([ "userInfo", "osshttp", "imgPlaceHolder" ])
  },
   mounted(){
    this.getCode();
    // var QRCode = require('qrcode');
    // QRCode.toDataURL('https://www.baidu.com')
    //   .then(url => {
    //   var qrbox = document.querySelector("#qrcode");
    //   const img = new Image();
    //   img.src=url;
    //   qrbox.appendChild(img);
    //   })
    //   .catch(err => {
    //     console.error(err)
    // })
  },
  methods: {
    
    
    getCode() {
      this.isLoading = true;
      axios
        .get("/sellgl/sellgl!getTgm.action", {
          params: {
            sid: this.userInfo.id,
            toUser:  this.userInfo.toUser
            
          }
        })
        .then(response => {
          var QRCode = require('qrcode');
           QRCode.toDataURL(response.data.dwz)
            .then(url => {
            var qrbox = document.querySelector("#qrcode");
            const img = new Image();
            img.src=url;
            qrbox.appendChild(img);
            })
            .catch(err => {
              console.error(err)
            })
        })
        .catch(function(error) {
          window.console.log(error);
        });
    }
  }
  

 
};
</script>
<style lang="scss">
  .tgbg{
    width: 100%;
    height: 38rem;
    background:url(../assets/tg0.jpg);
    background-position: 0 0;
    background-size: 100% 100% ;
    border: 0.1rem solid transparent;
    h3{
      text-align: center;
      color:#4acec1;
      font-weight:500;
      font-size:1.5rem;
      margin: 6rem auto 0;
    }
    .ewmdiv{
      text-align:center;
    }
    .ewm{
       margin: 2rem auto 0;
       width: 8rem;
    }
    .tj{
      text-align: center;
      margin-top: 3rem;
      .tjbtn{
        width: 50%;
        height: 3rem;
        text-align: center;
        font-size: 1.3rem;
        margin-top: 2rem;
        color: #fff;
        background: #26A69A;
        border: 0.1rem solid #E0E0E0;
        border-radius: 0.5rem;
        padding: 0.5rem 1.5rem;
    }
    }
   
   }


</style>